<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="fullpage.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clearfix:after{
            display: table;
            content: "";
            clear: both;
        }
        .zzz{
            position: relative;
        }
        .heade{
            width: 100%;
            height: 60px;
            background: white;
            position: fixed;
            z-index: 99;

        }
        .zz{
            position: relative;
        }

        .g-in{
            width: 1100px;
            margin: 0 auto;
        }

        .logo{
            width: 200px;
            height: 84px;
            position: absolute;
            left: 0;
            bottom: -18px;

        }
        .nav{
            float: left;
            margin-left: 235px;
            height: 60px;
        }
        li{
            list-style: none;
        }
        a {
            color: #444;
            text-decoration: none;
            transition: color 0.2s linear 0s;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        h2 {
            display: block;
            font-size: 1.5em;
            font-weight: bold;
        }
        /*.nav ul{*/
        /*    line-height: 60px;*/
        /*}*/
        .nav ul li {
            float: left;
            text-align: center;
            position: relative;

            background-size: cover;
        }
        .nav ul li a {
            display: block;
        }
        .nav ul li a h2 {
            font-weight: normal;
            font-size: 14px;
            line-height: 60px;
            color: #74ae0d;
            display: block;
            padding: 0 24px;
            transition: color 0.2s linear 0s;
        }
        .nav ul li .Snav {
            width: 100%;
            z-index: 9;
            position: absolute;
            top: 60px;
            left: 0;
            border-top: 3px solid #fff;
            background: rgba(255,255,255,0.5);
            display: none;
        }
        .nav ul li span {
            width: 100%;
            height: 3px;

            z-index: 99;
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0;
            transition: 0.2s linear 0s;
        }
        /*.nav ul li:hover>.Snav{*/
        /*    display: block;*/

        /*}*/

        body > div.zzz > div.heade > div > div.nav > ul > li:hover > a > h2{
            color: white;
        }
        .Snav dl dt a{
            font-size: 14px;
            color: black;
            line-height: 30px;
        }

        .container02 {
            background: url(container02.jpg) no-repeat center center;
        }
        .container02,.container03{
            position: relative;
            text-align: center;
            background-size: cover;
        }
        .secCon {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 9;

        }

        .container02 .wrap .ezmain {
            height: 400px;
            position: absolute !important;
            top: 50%;
            margin-top: -200px;
            left: 50%;
            margin-left: -550px;
        }
        .container02 .wrap,.container03 .wrap{
            position: relative;
            height: 100%;

        }
        .container02 .wrap .text {
            width: 640px;
            height: 400px;
            background: #fff;
            /* margin-top: 144px; */
        }
        .container02 .wrap .text dl dt strong {
            font-weight: normal;
            display: block;
            font-size: 1.4rem;
            line-height: 58px;
            margin-left: 75px;
            border-bottom: 1px solid #869673;
            width: 314px;
        }
        .container02 .wrap .text dl {
            padding: 60px 116px 0 64px;
        }
        .container02 .wrap .text dl dt {
            border-top: 1px solid #87c121;
            width: 460px;
            height: 60px;
        }
        .container02 .wrap .text dl dd.i {
            font-size: 12px;
            line-height: 24px;
            /* text-indent: 2em; */
            text-align: left;
            margin: 25px 0;
        }
        .container02 .wrap .text dl dd.i03 ul li img {
            height: 30px;
            width: auto;
        }
        .container02 .wrap .text dl dd.i03 ul li {
            float: left;
            margin: 0 6px;
            text-align: center;
        }
        .container02 .wrap .text dl dd.i03 ul li span {
            display: block;
            font-size: 14px;
            line-height: 24px;
            color: #79be00;
        }
        .container02 .wrap .text dl dd.more {
            margin: 0 auto;
            margin-top: 30px;
            width: 100px;
            height: 30px;
            background: #88c123;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            /*transition: 0.2s all 0;*/
        }
        .container02 .wrap .pic {
            position: absolute;
            right: 0;
            top: 70px;
            z-index: 9;
            width: 590px;
        }
        .container02 .wrap .pic img {
            width: 590px;
            height: auto;
        }
        .container02 .wrap .text dl dd.more a {
            color: #fff;
            display: block;

        }

        .swiper-container{
            width: 100%;
            height: 90vh;
            --swiper-pagination-color: #96ff1c;/* 两种都可以 */

        }

        .swiper-slide>img{
            width: 100%;
            height: 100%;
        }
        .container03 {
            background: url(container03.jpg) no-repeat center center;
        }
        .container03 .wrap .ezmain {
            height: 534px;
            position: absolute !important;
            top: 50%;
            margin-top: -267px !important;
            left: 50%;
            margin-left: -550px;
        }
        .eztitle_712 {
            text-align: center;
        }
        .eztitle_712 strong {
            font-weight: bold;
            font-size: 30px;
            line-height: 32px;
            color: #87c121;
        }
        .eztitle_712 span {
            font-size: 16px;
            line-height: 32px;
            display: block;
        }
        .container03 .wrap .ezmain .bd {
            margin-top: 30px;
        }
        @media screen and (max-width: 1280px){
            .container03 .wrap .ezmain .bd {
                margin-top: 10px;
            }
        }

        .container03 .wrap .ezmain .bd .sd {
            float: left;
            width: 366px;
        }
        .container03 .wrap .ezmain .bd .sd .pic {

            position: relative;
            overflow: hidden;
        }
        .container03 .wrap .ezmain .bd .sd .pic img {
            width: 366px;
            height: 220px;
            transition: all 0.6s;
        }


        .container03 .wrap .ezmain .bd .sd .pic .block {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9;
            background: rgba(0,0,0,0.6);
        }
        .container03 .wrap .ezmain .bd .sd .pic .block .ez01 {
            width: 82px;
            height: 25px;
            background: #a5d84b;
            font-size: 14px;
            line-height: 25px;
            color: #344f06;
            margin: 16px;
            transition: 0.2s all 0s;
        }
        .container03 .wrap .ezmain .bd .sd .pic .block .ez02 {
            margin-top: 40px;
            font-family: Arial;
            font-size: 42px;
            line-height: 50px;
            color: #89c61d;
        }
        .container03 .wrap .ezmain .bd .sd .pic .block .ez03 {
            font-family: Arial;
            font-size: 14px;
            line-height: 16px;
            color: #89c61d;
        }
        .container03 .wrap .ezmain .bd .sd dl {
            padding: 8px 30px;
            background: #fff;
            text-align: left;
            border-right: 1px solid #e5e8ed;
        }
        .container03 .wrap .ezmain .bd .sd dl dt {
            font-size: 14px;
            line-height: 78px;
            color: #64950e;
        }
        .container03 .wrap .ezmain .bd .sd dl dt a:hover{
            color:#89c61d ;
        }
        .container03 .wrap .ezmain .bd .mm {
            float: left;
            width: 368px;
            height: 440px;
            background: #fff;
            text-align: left;
        }
        .container03 .wrap .ezmain .bd .mm .text02 {
            text-align: left;
        }
        .container03 .wrap .ezmain .bd .mm .text02 dl {
            width: 100%;
            height: 55px;
            background: url(weibo_bg01.jpg) no-repeat center;
        }
        .container03 .wrap .ezmain .bd .mm .text02 dl dd {
            margin-left: 14px;
        }
        .container03 .wrap .ezmain .bd .mm .text02 dl dd strong {
            font-weight: bold;
            font-size: 20px;
            line-height: 55px;
            color: #c40404;
            display: block;
        }
        .container03 .wrap .ezmain .bd .mm .text02 dl dd strong a {
            color: #c40404;
        }
        .container03 .wrap .ezmain .bd .mm .text02 .ft01 {
            height: 122px;
            background: #fff;
        }

    </style>
</head>
<body>
<div class="zzz">
    <div class="heade ">
        <div class="g-in zz clearfix">
            <div class="logo">
                <a href=""><img src="laoxiangji.jpg" alt=""></a>
            </div>
            <div class="nav">
                <ul class="clearfix">
                    <li>
                        <a href="">
                            <h2>网站首页</h2>
                            <span></span>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <h2>品牌中心</h2>
                            <span></span>
                        </a>
                        <div class="Snav">
                            <dl>
                                <dt><a href="">品牌介绍</a></dt>
                                <dt><a href="">发展历程</a></dt>
                                <dt><a href="">品牌展示</a></dt>
                                <dt><a href="">品质保障</a></dt>
                            </dl>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <h2>品牌新闻</h2>
                            <span></span>
                        </a>
                        <div class="Snav">
                            <dl>
                                <dt><a href="">官方发布</a></dt>
                                <dt><a href="">媒体报道</a></dt>
                                <dt><a href="">官方微博</a></dt>
                            </dl>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <h2>老乡鸡美食</h2>
                            <span></span>
                        </a>
                        <div class="Snav">
                            <dl>
                                <dt><a href="">招牌菜品</a></dt>
                                <dt><a href="">新品推荐</a></dt>
                                <dt><a href="">营养早餐</a></dt>
                                <dt><a href="">健康主食</a></dt>
                            </dl>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <h2>视频中心</h2>
                            <span></span>
                        </a>
                        <div class="Snav">
                            <dl>
                                <dt><a href="">企业宣传片</a></dt>
                                <dt><a href="">菜品宣传片</a></dt>
                                <dt><a href="">食材宣传片</a></dt>
                            </dl>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <h2>门店查询</h2>
                            <span></span>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <h2>合作共赢</h2>
                            <span></span>
                        </a>
                        <div class="Snav">
                            <dl>
                                <dt><a href="">采购招标</a></dt>
                                <dt><a href="">联系老乡鸡</a></dt>

                            </dl>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <h2>求职招聘</h2>
                            <span></span>
                        </a>
                    </li>


                </ul>
            </div>
        </div>

    </div>
    <div id="fullpage">
        <div class="section">

            <div class="swiper-container ">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide">
                        <img src="http://www.lxjchina.cn/upload/2017-10/2017101765916189.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="http://www.lxjchina.cn/upload/2018-9/2018090441211941.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="http://www.lxjchina.cn/upload/2018-1/2018012359212465.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

            </div>

        </div>

        <div class="section container02 fp-section fp-table active">
            <div class="fp-tableCell" style="height: 638px">
                <div class="secCon">
                    <div class="wrap">
                        <div class="ezmain g-in">
                            <div class="text">
                                <dl>
                                    <dt><strong>老乡鸡，全国800多家直营店</strong></dt>
                                    <dd class="i">
                                        <p style="text-align: center">
                                            老乡鸡，全国800多家直营店
                                            <br/>
                                            干净卫生，品质放心
                                            <br>
                                            吃饭，就到老乡鸡
                                        </p>
                                    </dd>
                                    <dd class="i03">
                                        <ul class="clearfix">
                                            <li>
                                                <img src="iez01.png" alt="">
                                                <span>全国800多家直营店</span>
                                            </li>
                                            <li>
                                                <img src="iez02.png">
                                                <span>中国驰名商标</span>
                                            </li>
                                            <li>
                                                <img src="iez03.png">
                                                <span>中华名吃  绿色产品</span>
                                            </li>
                                            <li>
                                                <img src="iez04.png">
                                                <span>国家地理标志</span>
                                            </li>
                                        </ul>
                                    </dd>
                                    <dd class="more">
                                        <a href="">了解更多</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="pic">
                                <img src="zhaopian.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section container03 fp-section fp-table active" style="height: 638px">
            <div class="fp-tableCell" style="height: 638px">
                <div class="secCon">
                    <div class="wrap">
                        <div class="ezmain g-in">
                            <div class="eztitle_712">
                                <strong>品牌新闻</strong>
                                <span>老乡鸡全国800家直营店</span>
                            </div>
                            <div class="bd clearfix">
                                <div class="sd">
                                    <div class="pic">
                                        <a href="">
                                            <img src="cv.jpg" alt="">
                                        </a>
                                        <div class="block">
                                            <div class="ez01">官方发布</div>
                                            <div class="ez02">25</div>
                                            <div class="ez03">November</div>
                                        </div>
                                    </div>
                                    <dl>
                                        <dt style="line-height: 51px">
                                            <a href="">老乡鸡董事长束从轩荣获“2019年度创业...</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">肥西老母鸡（汤）食品有限公司 监测方案与...</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">新世界纪录诞生！“双冠”老乡鸡宴请全国 ...</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">老乡鸡宴请全国 全民吃鸡刷爆朋友圈</a>
                                        </dt>

                                    </dl>
                                </div>
                                <div class="sd">
                                    <div class="pic">
                                        <a href="">
                                            <img src="9.copy.jpg" alt="">
                                        </a>
                                        <div class="block">
                                            <div class="ez01">媒体报道</div>
                                            <div class="ez02">29</div>
                                            <div class="ez03">Semtember</div>
                                        </div>
                                    </div>
                                    <dl>
                                        <dt style="line-height: 51px">
                                            <a href="">老乡鸡二代掌门人束小龙的“继承者之路”</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">老乡鸡全体党员用行动打响疫情“反击战”</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">束小龙：产品和服务才是老乡鸡追寻的核心价...</a>
                                        </dt>
                                        <dt style="line-height: 51px">
                                            <a href="">抗击新型肺炎疫情：民营企业党组织发挥作用...</a>
                                        </dt>

                                    </dl>
                                </div>
                                <div class="mm">
                                    <div class="text02">
                                        <dl>
                                            <dd>
                                                <strong>
                                                    <a href="">关注老乡鸡官方微博</a>
                                                </strong>
                                            </dd>
                                        </dl>
                                        <div class="ft01">
                                            <iframe width="100%" height="385" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&amp;width=0&amp;height=600&amp;fansRow=2&amp;ptype=1&amp;speed=0&amp;skin=1&amp;isTitle=1&amp;noborder=1&amp;isWeibo=1&amp;isFans=1&amp;uid=2659356083&amp;verifier=fb050df3&amp;dpc=1"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="jquery-3.4.1.js"></script>
<script src="fullpage.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script>
$(function () {
    $('#fullpage').fullpage({
        navigation: true, //圆点导航
        paddingTop:'60',
        navigationPosition: 'right',   //圆点导航位置left or right
        navigationTooltips: ['第一个','第二个'],    　　//圆点导航提示信息
        showActiveTooltip: false,                             //圆点导航提示信息是否显示
        sectionsColor: ['white', '', '#f80','#ff4444'],         //设置每一屏的背景色
        anchors: ['page1', 'page2', 'page3','page4'],        //设置锚点
        menu: '#menu',                          //导航
        verticalCentered: false,                            //设置元素是否垂直居中
        // scrollingSpeed: 2000,                             //设置切屏速度
    })
    var mySwiper = new Swiper ('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        effect : 'fade',
        fadeEffect: {
            crossFade: true,
        },
        loop: true, // 循环模式选项
        autoplay:true,//自动切换

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

    })
    $('.nav>ul>li').hover(function () {
        $(this).children('.Snav').show()
        $(this).css('background','#87c121')

    },function () {
        $(this).children('.Snav').hide()
        $(this).css('background','')

        }
    )
    $('.pic').bind({
        mouseover:function () {
            $(this).children('a').children('img').css({'transform':'scale(1.1)'})
            $(this).children('.block').children('.ez01').css({'background':'white'})
        },mouseout:function () {
            $(this).children().children().css({'transform':''})
            $(this).children('.block').children('.ez01').css({'background':''})
        }
    })
})
</script>

</body>
</html>